<template>
	<div class="sys-menu-container">
		<el-dialog v-model="isShowDialog" draggable :close-on-click-modal="false" width="769px" :destroy-on-close="true">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle">
						<ele-Edit />
					</el-icon>
					<span> {{ title }} </span>
				</div>
			</template>
			<el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="80px" :rules="rules">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item :label="$t('cBKcJvJvOzc4cVt9imqEu')" prop="application">
							<el-select v-model="ruleForm.application" :placeholder="$t('w2iRtJjJyJuQtcWcZ2sgB')" style="width: 100%" @change="selectChangeHandle">
								<el-option v-for="item in applicationData" :key="item.name" :label="item.name" :value="item.code" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item :label="$t('ewevc5SyZvO6w8EgUe06z')" prop="pid">
							<el-cascader
								:options="menuData"
								:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
								:placeholder="$t('p9GXlbtEeNf0Nlr9Mdvwu')"
								clearable
								class="w100"
								v-model="ruleForm.pid"
							>
								<template #default="{ node, data }">
									<span>{{ data.name }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item :label="$t('a4_4cDBvNcpnlyqagd2tk')" prop="type">
							<el-radio-group v-model="ruleForm.type">
								<!-- <el-radio :label="1">目录</el-radio>
								<el-radio :label="2">菜单</el-radio>
								<el-radio :label="3">按钮</el-radio> -->
								<el-radio :label="0">{{ $t('x9zhgdNyi8nIWjO75jh') }}</el-radio>
								<el-radio :label="1">{{ $t('5Kw9tW6vnvtUwfAWpIuZh') }}</el-radio>
								<el-radio :label="2">{{ $t('uKlR2Plv6edDfN2mltxS') }}</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('puBidAdv6Kxc6FyUz1iJ0')" prop="name">
							<el-input v-model="ruleForm.name" :placeholder="$t('k8Gj10uoLyca3XwWuVwEr')" clearable />
						</el-form-item>
					</el-col>
					<template v-if="ruleForm.type == 0 || ruleForm.type == 1">
						<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="路由名称">
								<el-input v-model="ruleForm.name" placeholder="路由名称" clearable />
							</el-form-item>
						</el-col> -->
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('8rN5o7BkawwYmKnn9Xqrk')" prop="code">
								<el-input v-model="ruleForm.code" :placeholder="$t('6juPs15qhFIxbyeERtEyz')" clearable />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('bk4zvFx6_6zGa2hhHpCwb')" prop="router">
								<el-input v-model="ruleForm.router" :placeholder="$t('rWGeTovxpDpU1KoR5sd')" clearable />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('nr6ZbcgVnc6ocgoPbMl4t')" prop="component">
								<el-input v-model="ruleForm.component" :placeholder="$t('1olXiQHvnlGucpSjgC_2')" clearable />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('kuhaomW54NWjkDOuzNp')" prop="icon">
								<IconSelector v-model="ruleForm.icon" :placeholder="$t('o5gG7rTfqdAGvdry9c7I')" type="all" />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('kVsd9NeCnGza1u9Sd24Jn')" prop="redirect">
								<el-input v-model="ruleForm.redirect" :placeholder="$t('6oJ04adYhTsw9YprvKXjS')" clearable />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('yxzGdgPpBzMlwqo0S8aT7')" prop="link">
								<el-input v-model="ruleForm.link" :placeholder="$t('offRlk_2R18wWpmkilwQ')" clearable />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('g0O8HegV64a28l_2srAct')" prop="sort">
								<el-input-number v-model="ruleForm.sort" :placeholder="$t('ivdjt7Bot7XrcZX12b3a')" class="w100" />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('z9Yu6cwAGpSxWiZKsSb')" prop="visible">
								<el-radio-group v-model="ruleForm.visible">
									<el-radio label="N">{{ $t('2siHnpyp7Xk5SSgYpvqdm') }}</el-radio>
									<el-radio label="Y">{{ $t('dSa91Ja1eyfIwfizlNN2') }}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('5VisEzS5_0egSnIYcuJIh')" prop="isKeepAlive">
								<el-radio-group v-model="ruleForm.isKeepAlive">
									<el-radio :label="true">{{ $t('quTdx1OXkmFdQkZpELn9B') }}</el-radio>
									<el-radio :label="false">{{ $t('fzZ4z1lkG32QPhQEpZnec') }}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('m3F1OrU4L3nJhEbp78Lfq')" prop="isAffix">
								<el-radio-group v-model="ruleForm.isAffix">
									<el-radio :label="true">{{ $t('oolUiZyJyCjCWksaFMel') }}</el-radio>
									<el-radio :label="false">{{ $t('hTzni4quUdYXgEwnDfayy') }}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('s1NkeBNpli4DyFmEwqTrA')" prop="isIframe">
								<el-radio-group v-model="ruleForm.isIframe">
									<el-radio :label="true">{{ $t('nMmF2x4rwimSqs4kiKks7') }}</el-radio>
									<el-radio :label="false">{{ $t('9J5l9Ky9jeAxl2LLygar') }}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</template>
					<template v-if="ruleForm.type == 2">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('cvzfFiDqdVnR3AaYn0dPp')" prop="code">
								<el-input v-model="ruleForm.code" :placeholder="$t('ytjp59fG7xQYrOl7J80Ys')" clearable />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('r078Hwir7IkcCgT4miB3y')" prop="permission">
								<el-input v-model="ruleForm.permission" :placeholder="$t('h3ocMzpa0X5wPUqWZbec')" clearable />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('siFJldVqNzZs8NbdKu82')" prop="sort">
								<el-input-number v-model="ruleForm.sort" :placeholder="$t('ivdjt7Bot7XrcZX12b3a')" class="w100" />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item :label="$t('wuBMogLbyMjdzjRXaRnZ')" prop="weight">
								<el-radio-group v-model="ruleForm.weight">
									<el-radio label="1">{{ $t('unV308WNgQZacvVTnl2') }}</el-radio>
									<el-radio label="2">{{ $t('mobrA9CKtvScvpXSQz2u') }}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</template>
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否启用">
							<el-radio-group v-model="ruleForm.status">
								<el-radio :label="1">启用</el-radio>
								<el-radio :label="2">不启用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col> -->
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item :label="$t('59Jn6VxijRLfPyIyJDs')" prop="remark">
							<el-input v-model="ruleForm.remark" :placeholder="$t('rqMu379PeCCfZBhCr83Kc')" clearable type="textarea" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">{{ $t('xjdBVqTHmklt0GuDv3mw') }}</el-button>
					<el-button type="primary" @click="submitForm(ruleFormRef)" size="default">{{ $t('ztv2Tafnuu9rusmujXn7t') }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, watch, onMounted } from 'vue';
import IconSelector from '/@/components/IconSelector/index.vue';
import { getMenuListById, editMenuItem, addMenuItem } from '/@/api/system/menu/index';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
const { proxy } = useCurrentInstance();
const $t = proxy.$t;
import type { FormInstance, FormRules } from 'element-plus';
export default defineComponent({
	name: 'sysEditMenu',
	components: { IconSelector },
	props: {
		applicationData: {
			type: [Array] as any[],
			default: () => [],
		},
	},
	setup(props, ctx) {
		interface formType {
			// 菜单图标
			icon?: string;
			// 重定向
			redirect?: string;
			// 链接地址
			link?: string;
			// 菜单排序
			sort?: string | number;
			// 是否隐藏
			isHide?: Boolean;
			// 是否固定
			isKeepAlive?: Boolean;
			// 是否隐藏
			isAffix?: Boolean;
			// 是否内嵌
			isIframe?: Boolean;
			// 备注
			remark?: string | number;
			// 菜单类型
			type: number;
			// 菜单名称
			name: string;
			// 菜单编号
			code: string;
			// 路由路径
			router: string;
			// 组件
			component: string;
			// 父级菜单
			pid: string | number;
			// 所属应用
			application: string | number;
			id?: string | number;
			children?: [];
			permission?: string;
			weight?: string;
			visible: string;
		}

		// 表单标题
		const title = ref('');

		const rules = reactive<FormRules>({
			type: [{ required: true, message: $t('iYpNct8xMWlbXaborIWhm'), trigger: 'change' }],
			name: [{ required: true, message: $t('3GhtzDdODzPt5q7jjjS6f'), trigger: 'blur' }],
			code: [{ required: true, message: $t('ce58mJCt3Wqk46BmPl91h'), trigger: 'blur' }],
			component: [{ required: true, message: $t('s_5nSfOeBQirqqQf7u3Vn'), trigger: 'blur' }],
			router: [{ required: true, message: $t('uX0p9iUu3wVAwMg0vV9Zx'), trigger: 'blur' }],
			pid: [{ required: true, message: $t('jYf4e6b1R11geUOs8NSg'), trigger: 'change' }],
			application: [{ required: true, message: $t('6q3JmnMpjDOveJnovgH2'), trigger: 'change' }],
			permission: [{ required: true, message: $t('zArpVPHpIW4Z8bwBhZq'), trigger: 'change' }],
			weight: [{ required: false, message: $t('5m93hGfXlfRyWvqbfNq'), trigger: 'change' }],
		});
		const ruleFormRef = ref();
		const state = reactive({
			isShowDialog: false,
			ruleForm: {} as formType,
			menuData: [] as any[],
		});
		// 打开弹窗
		const openDialog = (row: any) => {
			let data: formType = JSON.parse(JSON.stringify(row));
			console.log(data)
			data.type = Number(data.type);
			state.ruleForm = data;
			state.isShowDialog = true;
			state.ruleForm.application && selectChangeHandle(state.ruleForm.application);
			title.value = data.id ? $t('pnJ1ZCvyHy5bcAdY4uxgF') : $t('xe4De984ddTylcqymJx8O');
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const cancel = () => {
			state.isShowDialog = false;
		};
		// 提交
		const submitForm = (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			formEl.validate(async (valid) => {
				if (valid) {
					try {
						let params: formType = JSON.parse(JSON.stringify(state.ruleForm));
						delete params.children;
						if (params.id) {
							await editMenuItem(params);
						} else {
							await addMenuItem(params);
						}
						ctx.emit('updateData'); //通知列表更新数据
					} catch (err) {
						ctx.emit('updateData');
					} finally {
						state.isShowDialog = false;
					}
				} else {
					console.log('error submit!');
					return false;
				}
			});
		};
		// 获取菜单数据
		const getMenuData = async (code: string, app: any) => {
			let res: { data: any[] } = await getMenuListById({ application: code });
			let parent: any = JSON.parse(JSON.stringify(app));
			parent.children = res.data;
			parent.id = 0;
			let arr: any[] = [parent];
			state.menuData = arr;
		};
		const selectChangeHandle = (e: any) => {
			let filterArr: any[] = props.applicationData.filter((item: any) => {
				return item.code == e;
			});
			getMenuData(e, filterArr[0]);
		};

		return {
			ruleFormRef,
			openDialog,
			closeDialog,
			cancel,
			submitForm,
			...toRefs(state),
			rules,
			selectChangeHandle,
			title,
		};
	},
});
</script>
